<template>
  <el-dialog title="用户修改" :visible.sync="dialogUserEdit" width="400px">
    <el-form
      :model="userEditForm"
      :rules="rules"
      ref="userEditForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="20">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="userEditForm.userName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="姓名" prop="nickName">
            <el-input v-model="userEditForm.nickName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userEditForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="userEditForm.phonenumber"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="userEditForm.sex" placeholder="请选择性别">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel('userEditForm')">取 消</el-button>
      <el-button type="primary" @click="editData('userEditForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogUserEdit: false,
      userEditForm: {
        userName: "",
        nickName: "",
        email: "",
        phonenumber: "",
        sex: "",
        userId: "",
      },
      rules: {
        // userName: [
        //   {
        //     required: true,
        //     pattern: /^([\w\@.]{1,14})$/g,
        //     message:
        //       "请输入正确的用户名：只能是数字，字母_@.区分大小写 ,1-14个字符",
        //     trigger: "blur",
        //   },
        // ],
        // nickName: [
        //   {
        //     required: true,
        //     pattern: /^([\u4e00-\u9fa5]){2,7}$/,
        //     message: "请输入正确的名字",
        //     trigger: "blur",
        //   },
        // ],
        email: [
          {
            required: true,
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        phonenumber: [
          {
            required: true,
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请输入性别",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    openDialog(flag, val) {
      this.dialogUserEdit = flag;
      this.userEditForm.userId = val[0].userId;
      this.userEditForm.userName = val[0].userName;
      this.userEditForm.nickName = val[0].nickName;
      this.userEditForm.email = val[0].email;
      this.userEditForm.phonenumber = val[0].phonenumber;
      if (val[0].sex == "男") {
        this.userEditForm.sex = "0";
      } else if (val[0].sex == "女") {
        this.userEditForm.sex = "1";
      }
      // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。
      // 在修改数据之后立即使用它，然后等待 DOM 更新。
      // 它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
      // this.$nextTick(() => {
      //   //修改数据后用此方法可立即获得更新后的数据
      //   this.$refs.userEditForm.resetFields();
      // });
    },
    cancel(userEditForm) {
      this.dialogUserEdit = false;
      // this.$refs[userEditForm].resetFields();
    },
    editData(formName) {
      console.log(formName);
      console.log(this.userEditForm);
      this.dialogUserEdit = false;
      this.$message("修改成功");
    },
  },
};
</script>

<style scoped>
</style>